<template>
  <view class="wrap">
    <view class="contentWrap" v-if="itemContent">
      <text class="title">{{ titles }}</text>
      <rich-text class="content" :nodes="itemContent" />
    </view>
    <view class="nodate" v-else>
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { educationInfo, readDetail } from '@/api/hmm'
const stateId = ref('')
const itemContent = ref('')
const titles = ref('')
const isread = ref('')
const userInfo = ref({})
const getUserId = ref('')
const dateStatus = ref('')
onLoad((option) => {
  stateId.value = option.id
  isread.value = option.isreadId
  dateStatus.value = option.dateStatus
})
onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  getUserId.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})

const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  if ((isread.value && dateStatus.value != 0) || dateStatus.value == null) {
    const param = {
      empi: userInfo.value.empi,
      id: isread.value,
      userId: getUserId.value
    }
    readDetail(param).then((res) => {
      if (res.code == 0) {
        console.log(res.data)
      }
    })
  }
  educationInfo(stateId.value).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      const paramsData = res.data && res.data.content ? res.data.content : ''
      itemContent.value = paramsData.replace(/<img /g, '<img style="display:block;width:100%"')
      titles.value = res.data && res.data.title ? res.data.title : ''
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  background: #fff;

  .contentWrap {
    padding: 0 32rpx;
    font-style: normal;

    .title {
      display: inline-block;
      width: 100%;
      margin-top: 32rpx;
      font-size: 36rpx;
      font-weight: 700;
      color: #222;
      text-align: center;
    }

    .content {
      display: block;
      padding: 40rpx 0;
      font-size: 30rpx;
      color: #222;
    }
  }

  .nodate {
    text-align: center;

    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }

    .nodate_text {
      .name {
        display: block;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>
